<template>
  <div>
    <div id="head">
      <p style="font-size: 20px">校园跑</p>
      <p style="font-size: 14px" @click="router.push('/set')">跑步设置</p>
    </div>
    <div id="side-box">
      <div id="inner-box">
        <p style="font-size: 3vw; margin-top: 35px">累计运动(公里)</p>
        <p class="km">{{ total.toFixed(2) }}</p>
        <p style="font-size: 3vw">累计次数：{{ list.length }}</p>
      </div>
    </div>
    <div id="Run">
      <div id="start">
        <img src="/img/田径white.png" class="sport-icon" />
        <span @click="router.push('/zxtRun')">开始跑步</span>
      </div>
      <div id="start">
        <img src="/img/骑行white.png" class="sport-icon" />
        <span @click="router.push('/zxtRun')">开始骑行</span>
      </div>
    </div>
    <div id="echarts"></div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import * as echarts from "echarts";
import { useRouter } from "vue-router";
import axios from "axios";
let router = useRouter();
let list = ref([]);
let dateList: any;
let kmList: any;
let total = computed(() => {
  return list.value.reduce(
    (sum: any, item: { daykm: any }) => sum + item.daykm,
    0
  );
});
let getlist = async () => {
  let { data } = await axios.get("http://8.130.46.189:3000/zxt/list");
  list.value = data.data;
  dateList = data.data.map((item) => item.date);
  kmList = data.data.map((item) => item.daykm);
};
onMounted(async () => {
  await getlist();
  const dom = document.getElementById("echarts");
  const myChart = echarts.init(dom); // 初始化echarts实例
  const option = {
    color: ["#ccc"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: dateList,
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "Direct",
        type: "bar",
        barWidth: "60%",
        data: kmList,
      },
    ],
  };
  // 设置实例参数
  myChart.setOption(option);
});
</script>

<style scoped>
#head {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
}

#head p {
  margin: 10px;
}

#side-box {
  margin: 15% auto;
  border: 2px solid #f3f3f3;
  border-radius: 100%;
  width: 180px;
  height: 180px;
  text-align: center;
  position: relative;
}

#inner-box {
  background-color: #f3f3f3;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.km {
  margin: 10px;
  color: #24c874;
  font-size: 12vw;
}

#Run {
  display: flex;
  justify-content: space-around;
}
#start {
  width: 160px;
  text-align: center;
  background-color: #24c874;
  color: white;
  height: 40px;
  line-height: 40px;
  border-radius: 30px;
  position: relative;
}
#start span {
  font-size: 4.5vw;
  position: absolute;
  right: 20%;
}
#echarts {
  position: absolute;
  width: 100%;
  height: 200px;
  top: 60%;
}
.sport-icon {
  width: 18%;
  position: absolute;
  top: 50%;
  left: 12%;
  transform: translate(0, -50%);
}
</style>
